<template>
	<view class="clear_user">
		<u-navbar bgColor="#fff" :placeholder="true" :fixed="true" @leftClick="$back" title="注销用户" titleStyle="{'color': '#000'}">
			
		</u-navbar>
		<view class="top_img">
			<image src="/static/showcase/clear_msg1.png">
				
			</image>
		</view>
		
		<view class="biaoqian_list">
			<view class="tab">
				<view class="line_s">
					
				</view>
				<view  class="line_font">
					您正在使用我们的注销功能
				</view>
				<view  class="line_font_bom">
					使用本功能会导致已下风险
				</view>
			</view>
			
			<scroll-view scroll-y="true" class="scroll">
				<view>
					<text>
						数据丢失：
					</text>
					用户进行注销操作后，将失去原有账户数据。这包括个人资料、聊天记录、发布的内容等。所有与该账户相关的数据都将被永久删除。
				</view>
				
				<view>
					<text>
						 无法登录：
					</text>
					一旦账号被注销，用户将无法再使用该账号登录相关平台或应用。如果用户需要再次使用该平台或应用，他们需要重新注册一个新账号。
				</view>
				
				<view>
					<text>
						  绑定账户信息的使用：
					</text>
					一旦账号被注销，用户将无法再使用该账号登录相关平台或应用。如果用户需要再次使用该平台或应用，他们需要重新注册一个新账号。
				</view>
				
				<view>
					<text>
						  影响其他账号：
					</text>
					如果该账号与其他账号存在关联，如同一邮箱注册的多个账号，注销其中一个账号可能会影响到其他账号的使用。例如，某些平台可能会要求用户在注销账号前先解除与其他账号的关联。
				</view>
				
				
				<view>
					<text>
						   安全风险：
					</text>
					果账号被他人盗用或存在安全隐患，注销账号可能无法解决问题，反而会增加个人信息泄露的风险。在这种情况下，用户应该采取其他措施来保护自己的账号和个人信息安全。
				</view>
				
			</scroll-view>
	
		</view>
	
		
		<view class="white_masks">
			<view class="texts">
				点击确认注销即视为已阅读并同意
				<span @click="clear_msg()">
					《账号注销重要提示》
				</span>
			</view>	
			<view class="bnts" @click="show1=true">
				我已确定风险，确认注销
			</view>
		</view>
		<!-- 注销须知 -->
		<u-popup :show="show1" mode="center" @close="close" @open="open">
			<view class="biaoqian">
				<view class="top">
					<view class="top_username">账号注销功能验证提醒</view>
					<view class="createbtn">{{userInfo.mobile}}</view>
					<view class="createbtn_bom">您正在使用我们的账号注销功能</view>
				</view>
		
				
				<scroll-view scroll-y="true" class="scroll">
					<view class="">
						为了保障您的账户安全，账号注销功能设置了手机号验证环节。这是我们对您账户安全的一项额外保护措施，确保只有您本人可以进行账户注销操作。
					</view>
					<view class="line">
					
					</view>
					
					<view class="white_mask" @click="yanzheng()">
						<view>
							开始验证
						</view>
					</view>
				
				</scroll-view>
				<image class="cl1" @click="show1=false" :src="'/images/cl1.png' | formatImgUrl" mode=""></image>
			</view>
		</u-popup>
		
		
		<u-popup mode="center" :show="show2">
			<view class="mask-tip">
				<view class="tit">
					提现验证提醒
				</view>
				<view class="txt">
					请输入验证码核实身份
				</view>
				<view class="code display-flex">
					<u-code-input
						v-model="code"
						:maxlength="6"
						space="5"
						size="33"
						:focus="true"
					></u-code-input>
				</view>
				<view class="btn" @tap="submit">
					开始验证
				</view>
				<view class="txt" style="margin-top: 12px;" @tap="show2=false,$go('/showcase/login/phone')">
					无法验证？切换绑定手机
				</view>
			</view>
			<image :src="'/images/close.png' | formatImgUrl" @click="show2 = false,code=''" class="closepic" mode="aspectFit"></image>
		</u-popup>
		
		
	</view>
</template>
<script>
	export default {
		data() {
			return {
				code:'',
				show1:false,	
				show2:false,
				userInfo: [],
				// 头像弹框
				show: false,
				// 标签
				erList: [],
				// 生日
				date: new Date().toLocaleDateString().replace(/\//g, "-"),
				array: ['请选择', '男', '女'],
				index: 0,
			}
		},
		onShow() {
			this.getUserInfo()
		},
		onLoad() {

		},
		methods: {
			yanzheng(){
				let that = this;
				this.$api.default.request('user/sendSmsUser').then((res) => {
					if (res.code) {
						that.show1 = false;
						that.show2 = true;
					} else {
						that.$common.errorToShow(res.msg)
					}
				})
			},
			submit(){
				//确认注销
				let that = this;
				if(that.code.length != "6"){
					that.$common.errorToShow("验证码请输入完全")
					return;
				}
				
				
				this.$api.default.request('user/clearUser',{code:this.code}).then((res) => {
					if (res.code) {
						that.outLogin();
					} else {
						that.$common.errorToShow(res.msg)
					}
				})
				
				//注销成功改的话
			},
			
			outLogin() {
				// let promise = this.tim.logout();
				
			
			
				this.$store.commit('reset')
				this.$api.default.request('user/logout', {}, 'GET', false).then((res) => {
					if (res.code) {
						this.$db.clear()
						uni.setStorageSync("is_looks",1)
						this.$common.successToShow("注销成功", () => {
							uni.redirectTo({
								url: '/pages/login/login'
							})
						})
			
					}
				})
			},
			clear_msg(){
				
				
			},
			close() {
			
			},
			// 开启须知弹窗
			open() {
			
			},
			go_auth() {
				if (this.userInfo.is_auth == 1) {
					uni.navigateTo({
						url: '/pages/user/auth1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/user/auth'
					})
				}

			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
				this.saveUser({
					'sex': this.index
				})
			},
			getUserInfo() {
				let that = this;
				this.$api.default.request('user/myuserInfo').then((res) => {
					if (res.code) {
						that.userInfo = res.user
						that.index = res.user.sex ? res.user.sex : 0
					} else {
						that.$common.errorToShow(res.msg)
					}
				})
			},
			onChooseAvatar(e) {
				this.$common.uploadImg(e.detail.avatarUrl, (data) => {
					if (data) {
						this.saveUser({
							'pic': data
						})
					}
				})
			},
			bindNick(e) {
				console.log(e)
				if (e.detail.value != this.userInfo.username) {
					this.userInfo.username = e.detail.value
					this.saveUser({
						'username': this.userInfo.username
					})
				}
			},
			saveUser(data) {
				this.$api.default.request('user/saveUser', data).then((res) => {
					if (res.code == 1) {
						this.userInfo = res.user
						this.$common.successToShow(res.msg)
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 头像弹框
			open() {

			},
			close() {
				this.show = false
			},
			// 生日
			bindDateChange: function(e) {
				this.date = e.detail.value
				this.saveUser({
					'birthday': e.detail.value
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	
	.closepic{
		display: block;
		width: 40rpx;
		height: 40rpx;
		margin: 40rpx auto 0;
	}	
	.mask-tip{
		background-color: #ffffff;
		width: 534rpx;
		border-radius: 8px;
		padding: 40rpx;
		box-sizing: border-box;
		text-align: center;
		font-family: '思源黑体';
		
		.tit{
			font-size: 16px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.phone{
			margin-top: 8px;
			font-size: 24px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.txt{
			margin-top: 4px;
			font-size: 12px;
			color: #ED3232;
		}
		
		.desc{
			margin-top: 12px;
			text-align: left;
			font-family: Source Han Sans;
			font-size: 12px;
			font-weight: bold;
			color: #3D3D3D;
		}
		
		.btn{
			margin-top: 30px;
			width: 100%;
			height: 43px;
			line-height: 43px;
			text-align: center;
			border-radius: 8px;
			background: #ED3232;
			font-family: Source Han Sans;
			font-size: 14px;
			font-weight: bold;
			color: #FFFFFF;
		}
		
		.code {
			margin-top: 12px;
			padding: 0 20rpx;
			justify-content: center;
		}
	}

	.clear_user {
		background: #fff;
		background-size: 100%;
		padding-top: 20rpx;
		.top_img{
			width: 100%;
			text-align: center;
			image,img{
				width: 206rpx;
				height: 206rpx;
				border-radius: 15px;
			}
		}
		
		.white_masks{
			position: fixed;
			padding-bottom: 10px;
			bottom:30px;
			left: 0;
			width: 100%;
			height: 80rpx;
			background: linear-gradient(to bottom, rgba(255,255,255, 0),rgba(255,255,255, .8));
			.texts{
				font-size: 20rpx;
				color: #999;
				width: 100%;
				text-align: center;
				span{
					color:#ED3232;
				}
			}
			.bnts{
				width: 90%;
				height: 80rpx;
				line-height: 80rpx;
				color: #fff;
				text-align: center;
				border-radius: 0.5em;
				background: #ED3232;
				margin: 0 auto;
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}

		.top_nav {
			width: 100%;
			text-align: center;

			.imgs {
				width: 550rpx;
				height: 450rpx;
			}

		}
		.navs {
				position: relative;
				top: -195rpx;
				width: 100%;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
		}
			
			
		.baibox {
			width: 84%;
			margin-left: 3%;
			background-color: #ffffff;
			padding: 0 5%;
			margin-bottom: 20rpx;
			border-radius: .5em;
			margin-top: -180rpx;

			.baili:last-child {
				border: none;
			}

			

			.baili {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 120rpx;
				border-bottom: 1px solid rgba(153, 153, 153, 0.1);

				.txt {
					width: 40%;
					flex-grow: 1;
					font-size: 28rpx;
					font-weight: bold;
					letter-spacing: 0em;
					color: #3D3D3D;
					flex-shrink: 0;
				}

				.cenbox {
					width: 30%;
					flex-grow: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					padding: 0 16rpx;
					.reds{
						color: red !important;
					}

					.headpic {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
					}
					.centxt {
						font-size: 28rpx;
						font-weight: normal;
						text-align: right;
						letter-spacing: 0em;
						color: #999999;
						width: 440rpx;
					}
					
					.is_auth {
						color: #45C4B0;
					}

					.is_no_auth {
						color: #999;
					}

					.qianbox {
						text-align: right;
						width: 450rpx;
						white-space: nowrap;

						.qli {
							background: rgba(153, 153, 153, 0.1);
							padding: 3rpx 12rpx 4rpx 8rpx;
							border-radius: 178px;
							font-size: 24rpx;
							color: #3D3D3D;
							display: inline-block;
						}

						.qli:not(:first-child) {
							margin-left: 16rpx;
						}
					}
				}

				.rarr {
					width: 40rpx;
					height: 40rpx;
					flex-shrink: 0;
				}
			}
		}

		.mask {
			background: #F2F5F2;
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
			overflow: hidden;
			.manei {
				margin-bottom: 20rpx;
				background-color: #ffffff;

				.matop {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 40rpx 50rpx;
					border-bottom: 1px solid rgba(153, 153, 153, 0.1);

					.mapic {
						width: 40rpx;
						height: 40rpx;
						flex-shrink: 0;
					}

					.matxt {
						flex-grow: 1;
						font-size: 28rpx;
						padding: 0 16rpx;
						font-weight: bold;
						letter-spacing: 0em;
						color: #3D3D3D;
					}
				}
			}

			.qubox {
				line-height: 120rpx;
				text-align: center;
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 0em;
				color: #3D3D3D;
				height: 120rpx;
				opacity: 1;
				background: #FFFFFF;
			}
		}
		.biaoqian_list{
			border-radius: 1em;
			background: #fff;
			width: 650rpx;
			margin: 0 auto;
			.top {
				padding-top: 70rpx;
				font-size: 28rpx;
				color: #000;
				text-align: center;
				width: 80%;
				margin-left: 10%;
				image {
					width: 120rpx;
					height: 120rpx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: -35px;
					margin: 0 auto;
					border-radius: 20em;
				}
				.top_username {
					font-weight: 700;
					font-size: 30rpx;
					color: #3D3D3D;
				}
		
				view {
					&:last-child {
						margin-top: 6rpx;
						font-family: '思源黑体';
						font-size: 23rpx;
						color: #ED3232;
					}
				}
			}
		
			.tab {
				font-size: 21rpx;
				font-weight: 700;
				width: 100%;
				float: left;
				text-align: left;
				font-family: '思源黑体';
				font-weight: 700;
				font-size: 24rpx;
				margin-bottom:23rpx;
				.line_s{
					width: 3px;
					height: 14px;
					border-radius: 60px;
					opacity: 1;
					background:#ED3232;
					float: left;
					position: relative;
					top:5rpx;
				}
				.line_font{
					float: left;
					margin-left: 10rpx;
				}
				.line_font_bom{
					width:80%;
					float: left;
					margin-left: 16rpx;
					font-size: 18rpx;
					color: #3d3d3d;
				}
			}
		
			.scroll {
				
				padding: 30rpx;
				padding-bottom: 20rpx;
				box-sizing: border-box;
				font-family: '思源黑体';
				font-size: 22rpx;
				color: #999;
				position: relative;
				overflow: hidden;
				background: #F2F5F2;
				border-radius: 0.5em;
				view{
					margin-bottom: 40rpx;
					&:last-child{
						margin-bottom: 20rpx;
					}
				}
				text{
					font-weight: 700;
					color:#3d3d3d
				}
				.lists{
					float:left;
					width: 100%;
					background:rgba(237, 50, 50, 0.15);
					border-radius: 8px;
					.tops{
						width: 90%;
						margin-left: 5%;
						float:left;
						font-weight: 700;
						font-size: 24rpx;
						margin-bottom: 10rpx !important;
						padding-top: 20rpx;
						.imgs{
							width: 30rpx;
							height: 30rpx;
							float: right;
						}
					}
					.botm{
						margin-left: 5%;
						width: 90%;
						float:left;
						color: #999;
					}
				
				}
			}
			
			.white_mask{
				position: sticky;
				padding-bottom: 10px;
				bottom: -50px;
				left: 0;
				width: 100%;
				height: 80rpx;
				
				background: linear-gradient(to bottom, rgba(255,255,255, 0),rgba(255,255,255, .8));
				view{
					width: 90%;
					height: 80rpx;
					line-height: 80rpx;
					color: #fff;
					text-align: center;
					border-radius: 0.5em;
					background: #ED3232;
					margin: 0 auto;
				}
			}
		}
		.biaoqian {
		
			border-radius: 0.5em;
			background: #fff;
			width: 550rpx;
			margin: 0 auto;
			
		
			.top {
				padding-top: 50rpx;
				font-size: 28rpx;
				color: #000;
				text-align: center;
				width: 80%;
				margin-left: 10%;
				font-weight: 700;
				font-size: 30rpx;
				color: #3D3D3D;
				image {
					width: 130rpx;
					height: 130rpx;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					top: -35px;
					margin: 0 auto;
					border-radius: 20em;
				}
				.createbtn{
					margin-top: 16rpx;
					font-size: 38rpx;
					letter-spacing: 2px;
				}
				.createbtn_bom{
					color: #ED3232;
					font-size: 22rpx;
					margin-top: 10rpx;
				}
			}
		
		
			.scroll {
				padding: 30rpx;
				padding-bottom: 20rpx;
				height: 350rpx;
				box-sizing: border-box;
				font-family: '思源黑体';
				font-size: 24rpx;
				font-weight: 700;
				color: #3d3d3d;
				position: relative;
				overflow: hidden;
				view{
					margin-bottom: 20rpx;
				}
				.lists{
					float:left;
					width: 100%;
					background:rgba(237, 50, 50, 0.15);
					border-radius: 8px;
					.tops{
						width: 90%;
						margin-left: 5%;
						float:left;
						font-weight: 700;
						font-size: 24rpx;
						margin-bottom: 10rpx !important;
						padding-top: 20rpx;
						.imgs{
							width: 30rpx;
							height: 30rpx;
							float: right;
						}
					}
					.botm{
						margin-left: 5%;
						width: 90%;
						float:left;
						color: #999;
					}
				
				}
			}
			.line{
				height: 1rpx;
				width: 100%;
				background: rgba(153, 153, 153, 0.1);
				margin-top:30rpx;
		
			}
			.white_mask{
				margin-top: 30rpx;
				left: 0;
				width: 100%;
				height: 80rpx;
				background: linear-gradient(to bottom, rgba(255,255,255, 0),rgba(255,255,255, .8));
				view{
					width: 90%;
					height: 80rpx;
					line-height: 80rpx;
					color: #fff;
					text-align: center;
					border-radius: 0.5em;
					background: #ED3232;
					margin: 0 auto;
				}
			}
		}
		.cl1 {
			height: 40rpx;
			width: 40rpx;
			position: absolute;
			margin-top:40rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
</style>